﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Blueidea_JsDrop.aspx.cs" Inherits="js组件_js拖拽_Blueidea_JsDrop" %>

<script>
var iMouseDown  = false;
var dragObject  = null;
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}


// Demo 0 variables
var DragDrops   = [];
var curTarget   = null;
var lastTarget  = null;



function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
	var left = 0;
	var top  = 0;
	while (e.offsetParent){
		left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
		top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
		e     = e.offsetParent;
	}

	left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
	top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

	return {x:left, y:top};

}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function mouseDown(ev){
	ev         = ev || window.event;
	var target = ev.target || ev.srcElement;

	if(target.onmousedown || target.getAttribute('DragObj')){
		return false;
	}
}

function mouseUp(ev){

	//dragObject = null;

	if(dragObject){
		ev           = ev || window.event;
		var mousePos = mouseCoords(ev);

		var dT = dragObject.getAttribute('droptarget');
		if(dT){
			var targObj = document.getElementById(dT);
			var objPos  = getPosition(targObj);
			if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) 
&& (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth)))
 && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){
				var nSrc = targObj.getAttribute('newSrc');
				if(nSrc){
					dragObject.src = nSrc;
					setTimeout(function(){
						if(!dragObject || !dragObject.parentNode) return;
						dragObject.parentNode.removeChild(dragObject);
						dragObject = null;
					}, parseInt(targObj.getAttribute('timeout')));
				} else {
					dragObject.parentNode.removeChild(dragObject);
				}
			}
		}
	}
	dragObject = null;

	iMouseDown = false;
}


function mouseMove(ev){
	ev         = ev || window.event;

	/*
	We are setting target to whatever item the mouse is currently on

	Firefox uses event.target here, MSIE uses event.srcElement
	*/
	var target   = ev.target || ev.srcElement;
	var mousePos = mouseCoords(ev);

	if(dragObject){
		dragObject.style.position = 'absolute';
		dragObject.style.top      = mousePos.y - mouseOffset.y;
		dragObject.style.left     = mousePos.x - mouseOffset.x;
	}

	// track the current mouse state so we can compare against it next time
	lMouseState = iMouseDown;

	// this prevents items on the page from being highlighted while dragging
	if(curTarget || dragObject) return false;
}


function addDropTarget(item, target){
	item.setAttribute('droptarget', target);
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;

window.onload = function (){
	makeDraggable(document.getElementById('DragImage9'));
	makeDraggable(document.getElementById('DragImage10'));
	makeDraggable(document.getElementById('DragImage11'));
	makeDraggable(document.getElementById('DragImage12'));

	addDropTarget(document.getElementById('DragImage9'),  'TrashImage1');
	addDropTarget(document.getElementById('DragImage10'), 'TrashImage1');
	addDropTarget(document.getElementById('DragImage11'), 'TrashImage1');
	addDropTarget(document.getElementById('DragImage12'), 'TrashImage1');
}
</script>



<FIELDSET id=Demo6 style="HEIGHT: 70px">
<h3>Demo - Drag any image onto the 
trashcan</h3>
<IMG id=TrashImage1 
src="http://www.blueidea.com/articleimg/2006/07/3791/drag_drop_trash.gif" 
timeout="600" newSrc="http://www.blueidea.com/articleimg/2006/07/3791/transparent.gif">     
<br />  
<IMG 
id=DragImage9 
src="http://www.blueidea.com/articleimg/2006/07/3791/drag_drop_spade.gif">
<IMG 
id=DragImage10 
src="http://www.blueidea.com/articleimg/2006/07/3791/drag_drop_heart.gif">
<IMG 
id=DragImage11 
src="http://www.blueidea.com/articleimg/2006/07/3791/drag_drop_diamond.gif">
<IMG 
id=DragImage12 
src="http://www.blueidea.com/articleimg/2006/07/3791/drag_drop_club.gif"> 
</FIELDSET> 